import React, { Component } from 'react'
import Top from '../../components/Top/Top'
import { connect } from "react-redux"
import { getUser, actions } from '../../store/modules/login.js';
import { bindActionCreators } from "redux"
import { Link } from "react-router-dom"
import "./login.css"
import { Button, } from 'antd-mobile';
class Login extends Component {

    render() {
        let title = "login"
        let { user: { phone, password }, login: { changeUser, reqLogin }, history } = this.props
        return (
            <div>
                <Top title={title}></Top>
                <Link className="login_link" to="/register">注册</Link>
                <div className="login_con1">
                    <img src="" alt="" />
                    <div  className="login_input1">phone: <input type="text" value={phone} onChange={(e) => changeUser("phone", e.target.value)} /></div>
                    <div className="login_input2">password: <input type="text" value={password} onChange={e => changeUser('password', e.target.value)} /></div>
                    <Button type="primary" className="login_btn1" onClick={() => reqLogin(history)} size="small" style={{ marginRight: '4px' }}>登录</Button>
                </div>

            </div>
        )
    }
}
let mapStateToProps = (state) => ({
    user: getUser(state),
});
const mapDispatchToProps = (dispatch) => ({
    login: bindActionCreators(actions, dispatch)
})
export default connect(mapStateToProps, mapDispatchToProps)(Login)